ShowTable of Contents
Page Heading コントロールの概説
モバイルページの上部にはヘッダーのバーが表示されることが標準的なスタイルです。この Page Heading はそのヘッダー部分に当たるコントロールで、とりわけページのタイトルを表示したり、「戻る」ボタンで前のページに戻るボタンを配置したりします。
生成されるタグ
このコントロールのタグは xe:djxmHeading です。
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:singlePageApp id="singlePageApp1" selectedPageName="home">
<xe:appPage id="appPage1" pageName="home">
<xe:djxmHeading id="djxmHeading1" label="Topic" back="戻る"></xe:djxmHeading>
</xe:appPage>
</xe:singlePageApp>
</xp:view>
Page Heading のプロパティ
|
カテゴリ |
プロパティ |
説明 |
|
基本 |
back |
Backボタン(前のページに戻る)のラベルテキストを指定 |
|
|
href |
ナビゲーションコントロールが押されたときに開く URL を指定 |
|
|
label |
ヘッダーに表示されるテキストを指定 |
|
|
moveTo |
次のモバイルページの pageName プロパティを指定 |
|
|
transition |
次のページ遷移におけるトランジションのエフェクト。デフォルトはslide。その他のオプションとして fade, flip, none を指定可
|
2 つの編集可能領域
Page Heading コントロールには 2 つの編集可能領域があり、表示する内容をや機能を追加できる
Title の編集可能領域には、ヘッダーに表示させるテキストを JavaScript などを使用して固定文字列ではなく、変数として表示も可能。次の例は、Title の編集可能領域に「計算結果」フィールドを配置し、JavaScript を使ってデータベースタイトルを表示させる例。
<xe:djxmHeading id="djxmHeading1" back="戻る">
<xp:text escape="true" id="computedField1" value="#{javascript:@DbTitle()}">
</xp:text>
</xe:djxmHeading>
Action Facet には通常、新規文書作成のためのボタンをヘッダーの右端に配置する。
以下の例は、先の例に新規文書作成のボタンコントロールを配置し、ラベルを「+」にした例である。（ボタンをクリックした際の処理は割愛）
<xe:djxmHeading id="djxmHeading1" back="戻る"><xp:this.facets>
<xp:button value="+" id="button1" xp:key="actionFacet"></xp:button></xp:this.facets>
<xp:text escape="true" id="computedField1" value="#{javascript:@DbTitle()}">
</xp:text>
</xe:djxmHeading>